<template>
	<view class="container" :style="{height:height}">
		<view class="nav" :style="{height:nav_h}">
			<view class="navigation">
				<image src="../../static/images/back.png" v-on:click="reback"></image>
				<view>
					体质测试
				</view>
			</view>
		</view>
		<view class="nav_lh" :style="{height:nav_lh}"></view>
		<view class="title">中医体质辨识</view>
		<view class="grade">
			<view :class="grade==1?'checked':'default'" v-on:click="grade_selected">男</view>
			<view :class="grade==0?'checked':'default'" v-on:click="grade_selected">女</view>
		</view>
		<view class="button" v-on:click="button_start">
			<view class="button_title">开始辨识</view>
			<view class="button_sub">(免费)</view>
		</view>
		<view class="remark">
			<view>九种体质辨识的意义：上医治未病，每个人天生体质不同，根据科学测试，能准确判断自身体质情况。</view>
			<view>本系统经过多年研究，有着极高的准确率，对身体健康保养，起到非常大的指导意义</view>
		</view>
		<view class="bottom_title">科学养生  全家幸福</view>
		<view class="copyright">中华中医药学会中医体质分会 技术研发</view>
	</view>
</template>
<style>
	.nav{width:100%;padding-bottom: 20upx;display: flex;justify-content: flex-start;z-index: 999;
	      align-items: flex-end;position: fixed;top:0;left:0;}
	.navigation{width:95%;padding-left:5%;height: 50upx;font-size: 28upx;color: #333;text-align: center;display: flex;justify-content: flex-start;align-items: center;}
	.navigation image{width:40upx;height: 40upx;padding:5upx 30upx;border-radius: 25upx;background: #F1F1F1;}
	.navigation view{font-size: 28upx;color: #333;text-align: center;margin-left:30%;}
	.nav_lh{width:100%;}
	
	.container{width: 100%;background-size: 100% auto;background-repeat: no-repeat;
				background-image: url("https://zhangjie.jdmuguzhid.com/static/images/yztang/test_bg.jpg");}
	.title{width:100%;padding-top:200upx;height: 120upx;line-height: 120upx;font-size: 48upx;font-weight: bold;color: #2ccdac;text-align: center;}
	.grade{width:50%;overflow: hidden;margin:40upx 25%;display: flex;justify-content: space-between;align-items: center;border:1px solid #2ccdac;height: 80upx;border-radius: 40upx;}
	.checked{width:50%;height: 80upx;line-height: 80upx;text-align: center;background: #2ccdac;color: #FFFFFF;}
	.default{width:50%;height: 80upx;line-height: 80upx;text-align: center;background: #FFFFFF;color: #2ccdac;}
	.button{width:300upx;height: 300upx;display: flex;background-image: linear-gradient(#43eac9, #24c3a4);color: #FFFFFF;font-size: 32upx;
			justify-content: center;align-items: center;flex-direction: column;border-radius: 150upx;margin:100upx auto 0 auto;}
	.remark{width:70%;margin:50upx 15%;font-size: 28upx;line-height: 40upx;color: #666666;}
	.bottom_title{width:100%;height: 80upx;line-height: 80upx;text-align: center;background: #2ccdac;color: #FFFFFF;font-size: 32upx;}
	.copyright{width:100%;text-align: center;font-size: 28upx;position: fixed;bottom: 0;}
</style>
<script>
	export default {
		data() {
			return {
				grade:0,
				result:[],
				height:'',
				nav_h:'',
				nav_lh:'',
				statusBar:'',
				url: getApp().globalData.url,
				static:getApp().globalData.static
			}
		},
		onLoad(e) {
			var res = uni.getSystemInfoSync();
			this.nav_h  = res.statusBarHeight +35+ "px";
			this.nav_lh = res.statusBarHeight +45+ "px";
			this.height = res.screenHeight+"px";
			this.statusBar = res.statusBarHeight+"px";
			uni.removeStorageSync("number");
		},
		onShow(){
		},
		methods: {
			reback:function()
			{
				uni.navigateBack();
			},
			grade_selected:function()
			{
				if(this.grade==0)
				{
					this.grade = 1;
				}
				else
				{
					this.grade = 0;
				}
				uni.setStorageSync("gender",this.grade);
			},
			button_start:function()
			{
				uni.navigateTo({
					url:"question?number=0"
				})
			}
		}
	}
</script>